<template>
  <div class="QuickRes-container" @click.stop="goShowQuickUser">
    <a-textarea
      v-if="aready"
      style="width: 100%"
      readonly
      v-model:value="text_calc"
      auto-size
    />

    <QuickUser
      :type="type"
      v-if="showQuickUser"
      v-model:show="showQuickUser"
      v-model:user-select="userSelect"
      v-model:role-select="roleSelect"
      v-model:org-select="orgSelect"
      @ok="showQuickUserCon"
    ></QuickUser>
  </div>
</template>

<script lang="ts" setup>
import QuickUser from "./QuickUser.vue";
import {computed, ref} from "vue";

const props = defineProps({
  text: {
    type: String,
    default: ""
  },
  idsText: {
    type: String,
    default: ""
  },
  idsArr: {
    type: Array,
    default: []
  },
  //类型[1:部门,2:用户,3:角色]
  type: {
    type: Array,
    default: [1, 2, 3]
  }
});

const emits = defineEmits(["update:text", "update:idsText", "update:idsArr"]);

const aready = ref(false);
setTimeout(() => {
  aready.value = true;
}, 50);

const showQuickUser = ref(false);
const userSelect = ref([]);
const roleSelect = ref([]);
const orgSelect = ref([]);

props.type.forEach((item: any) => {
  if (item === 1) {
    orgSelect.value = props.idsText ? props.idsText.split(",") : [];
  }
  if (item === 2) {
    userSelect.value = props.idsText ? props.idsText.split(",") : [];
  }
  if (item === 3) {
    roleSelect.value = props.idsText ? props.idsText.split(",") : [];
  }
});

const text_calc = computed({
  get() {
    return props.text;
  },
  set(value) {
    emits("update:text", value);
  }
});
const idsText_calc = computed({
  get() {
    return props.idsText;
  },
  set(value) {
    emits("update:idsText", value);
  }
});

const idsArr_calc = computed({
  get() {
    return props.idsArr;
  },
  set(value) {
    emits("update:idsArr", value);
  }
});

const goShowQuickUser = () => {
  showQuickUser.value = true;
};

const showQuickUserCon = (e) => {
  let {org, user, role} = e;
  text_calc.value = "";
  idsText_calc.value = "";
  idsArr_calc.value = [];
  props.type.forEach((item: any) => {
    if (item === 1) {
      text_calc.value = org.map((item: any) => item.title).join(",");
      idsText_calc.value = org.map((item: any) => item.id).join(",");
      idsArr_calc.value = org.map((item: any) => item.id);
    }
    if (item === 2) {
      text_calc.value = user.map((item: any) => item.name).join(",");
      idsText_calc.value = user.map((item: any) => item.id).join(",");
      idsArr_calc.value = user.map((item: any) => item.id);
    }
    if (item === 3) {
      text_calc.value = role.map((item: any) => item.name).join(",");
      idsText_calc.value = role.map((item: any) => item.id).join(",");
      idsArr_calc.value = role.map((item: any) => item.id);
    }
  });
};

/**
 * 清除已选择的项
 * @param type 类型[1:部门,2:用户,3:角色]
 * @type number[]
 */
const clearSelect = (type: number[] = [1, 2, 3]) => {
  type.forEach((item: any) => {
    if (item === 1) {
      orgSelect.value = [];
    }
    if (item === 2) {
      userSelect.value = [];
    }
    if (item === 3) {
      roleSelect.value = [];
    }
    text_calc.value = "";
    idsText_calc.value = "";
    idsArr_calc.value = [];
  });
};

defineExpose({
  clearSelect
});
</script>

<style lang="less" scoped>
.QuickRes-container {
  width: 100%;
}
</style>
